<template>
    <div class="app-container">
                <el-form
                    :model="queryParams"
                    ref="queryForm"
                    size="small"
                    :inline="true"
                    v-show="showSearch"
                    label-width="68px"
                >
                    <el-form-item label="表单名称" prop="formName">
                        <el-input
                            v-model="queryParams.formName"
                            placeholder="请输入表单名称"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="表单标签" prop="tag">
                        <el-input
                            v-model="queryParams.tag"
                            placeholder="请输入表单标签"
                            clearable
                            style="width: 240px"
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>
                    <el-form-item label="表单状态" prop="formStatus">
                        <el-select
                            v-model="queryParams.formStatus"
                            placeholder="请选择表单状态"
                        >
                            <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                            v-model="dateRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <right-toolbar
                        :showSearch.sync="showSearch"
                        @queryTable="getList"
                        :columns="columns"
                    ></right-toolbar>
                </el-row>
                <el-table
                    v-loading="loading"
                    :data="formList"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                    />
                    <el-table-column
                        label="表单名称"
                        align="center"
                        key="formName"
                        prop="formName"
                        v-if="columns[0].visible"
                    />
                    <el-table-column
                        label="表单标签"
                        align="center"
                        key="tagsArray"
                        prop="tagsArray"
                        v-if="columns[1].visible"
                        :show-overflow-tooltip="true"
                    >
                        <template align="center" slot-scope="scope">
                            <span
                                v-for="(item, index) in scope.row.tagsArray"
                                :key="(item, index)"
                                ><el-tag>{{ item }}</el-tag
                                >&#12288;</span
                            >
                        </template>
                    </el-table-column>

                    <el-table-column
                        label="表单状态"
                        align="center"
                        v-if="columns[2].visible"
                        width="160"
                    >
                        <template slot-scope="scope">
                            <span
                                style="color: #e6a23c"
                                v-if="scope.row.formStatus == 0"
                                >未发布</span
                            >
                            <span
                                style="color: #67c23a"
                                v-if="scope.row.formStatus == 1"
                                >发布中</span
                            >
                            <span
                                style="color: #909399"
                                v-if="scope.row.formStatus == 2"
                                >已结束</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        align="center"
                        v-if="columns[3].visible"
                        width="160"
                    >
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        width="160"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <el-link
                                :underline="false"
                                class="el-icon-edit"
                                @click="edit(scope.row.id)"
                                >编辑 </el-link
                            >&nbsp;
                            <el-popconfirm
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                title="确定要发布表单吗？"
                                hide-icon
                                @confirm="editStatus(scope.row, 1)"
                            >
                                <el-link
                                    slot="reference"
                                    class="el-icon-s-promotion"
                                    v-if="scope.row.formStatus == 0"
                                    :underline="false"
                                    >发布
                                </el-link>
                            </el-popconfirm>
                            <el-popconfirm
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                title="确定要停止发布表单吗？"
                                hide-icon
                                @confirm="editStatus(scope.row, 2)"
                            >
                                <el-link
                                    slot="reference"
                                    class="el-icon-video-pause"
                                    v-if="scope.row.formStatus == 1"
                                    :underline="false"
                                    >停止
                                </el-link>
                            </el-popconfirm>
                            &nbsp;
                            <el-link
                                slot="reference"
                                class="el-icon-share"
                                v-if="scope.row.formStatus == 1"
                                :underline="false"
                                @click="share(scope.row)"
                                >分享
                            </el-link>
                            <el-popconfirm
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                title="确定要继续发布表单吗？"
                                hide-icon
                                @confirm="editStatus(scope.row, 1)"
                            >
                                <el-link
                                    slot="reference"
                                    class="el-icon-video-pause"
                                    v-if="scope.row.formStatus == 2"
                                    :underline="false"
                                    >继续
                                </el-link>
                            </el-popconfirm>
                            &nbsp;
                            <el-link
                                :underline="false"
                                class="el-icon-edit"
                                v-if="scope.row.formStatus == 2"
                                @click="seeResult(scope.row.id)"
                                >结果
                            </el-link>
                            &nbsp;
                            <el-popconfirm
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定要删除表单吗？"
                                @confirm="editStatus(scope.row, -1)"
                            >
                                <el-link
                                    slot="reference"
                                    class="el-icon-delete-solid"
                                    :underline="false"
                                    >删除
                                </el-link>
                            </el-popconfirm>
                            &nbsp;
                            <el-link
                                :underline="false"
                                class="el-icon-star-on"
                                @click="edit(scope.row.id)"
                                >模板复用
                            </el-link>
                            <el-dialog
                                title="分享链接"
                                :visible.sync="urlDialogVisible"
                                width="30%"
                            >
                                <div>
                                    <h2>url链接&nbsp;:&nbsp;</h2>
                                    <el-input
                                        v-model="url"
                                        placeholder="请输入内容"
                                    ></el-input>
                                </div>
                                <span slot="footer" class="dialog-footer">
                                    <el-button type="primary" @click="copyUrl"
                                        >复制</el-button
                                    >
                                </span>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNo"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />

    </div>
</template>

<script>
import { nanoid } from "nanoid";

import { editStatus, listForm } from "@/api/forms/ipublish.js"; //修改表单状态
//引入复制功能
import Vue from "vue";
import VueClipboard from "vue-clipboard2";

Vue.use(VueClipboard);

export default {


    data() {
        return {
            //url对话框
            urlDialogVisible: false,
            //url
            url: "",
            // 遮罩层
            loading: true,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表单表格数据
            formList: null,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                type: false,
                pageNo: 1,
                pageSize: 10,
                formName: undefined,
                tag: undefined,
                formStatus: undefined,
            },
            //状态参数选择器
            statusOptions: [
                { label: "未发布", value: 0 },
                { label: "已发布", value: 1 },
                { label: "已结束", value: 2 },
            ],
            // 列信息
            columns: [
                { key: 0, label: `表单名称`, visible: true },
                { key: 1, label: `表单状态`, visible: true },
                { key: 2, label: `表单标签`, visible: true },
                { key: 3, label: `创建时间`, visible: true },
            ],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        /** 查询表单列表 */
        getList() {
            this.loading = true;
            listForm(this.addDateRange1(this.queryParams, this.dateRange)).then(
                (response) => {
                    this.formList = response.forms;
                    this.formList.forEach((item) => {
                        this.$set(item, "tagsArray", []);
                        if (item.tags != null) {
                            item.tagsArray = item.tags.split(",");
                        }
                    });
                    this.total = response.counts;
                    this.loading = false;
                }
            );
        },
        // 表单状态修改
        handleStatusChange(row) {
            console.log(row.form.formStatus);
            let text = row.form.formStatus == "0" ? "启用" : "停用";
            this.$modal
                .confirm(
                    '确认要"' + text + " " + row.form.formName + " 业务表单吗？"
                )
                .then(function () {
                    var params = {
                        formId: row.form.id,
                        formStatus: row.form.formStatus == "0" ? "1" : "0",
                    };
                    editStatus(params).then((response) => {
                        console.log(response);
                    });
                })
                .then(() => {
                    this.$modal.msgSuccess(text + "成功");
                })
                .catch(function () {
                    row.status = row.status === "0" ? "1" : "0";
                });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.userId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        //根据表单id改变id状态   停止<->发布
        editStatus(row, status) {
            //打包数据
            var params = {
                formId: row.id,
                formStatus: status,
            };
            //调用接口，根据id删除表单
            editStatus(params)
                .then((response) => {
                    //查看后端发来的数据
                    console.log(response);
                    //消息提醒
                    if (status == 2) {
                        row.formStatus = 2;
                        this.$message("停止表单成功");
                    } else if (status == 1) {
                        this.$message({
                            message: "发布表单成功",
                            type: "success",
                        });
                        row.formStatus = 1;
                        this.url = row.formUrl;
                        this.urlDialogVisible = true;
                    } else if ((status = -1)) {
                        for (var i = 0; i < this.formList.length; i++) {
                            if (this.formList[i].id == row.id) {
                                this.formList.splice(i, 1);
                                //消息提醒
                                this.$message("删除表单成功");
                                break;
                            }
                        }
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },

        //进入编辑表单页面
        edit(formId) {
            this.$router.push({
                path: "/forms/edit",
                query: { formId: formId },
            });
        },

        //查看表单结果，进行带参（表单id）跳转
        seeResult(formId) {
            this.$router.push({
                path: "/forms/result",
                query: { formId: formId },
            });
        },

        //分享url
        share(row) {
            this.urlDialogVisible = true;
            this.url = row.formUrl;
        },

        //复制URL
        copyUrl() {
            var that = this;
            this.$copyText(this.url).then(function (e) {
                that.$message({
                    message: "复制链接成功，赶紧分享给你的小伙伴吧！",
                    type: "success",
                });
            });
        },

        handleCommand(command) {
            this.$message("click on item " + command);
        },
        //复用表单
        setModel(row) {
            this.$router.push({path:'/forms/model',query: {formId:row.id}});
        },
    },
};
</script>
